<template>
  <div>
    <el-dialog
      title="请输入赛事执行密码"
      class="gl_dialog_TitleLine gl_dl_footer"
      :visible.sync="passwordVisible"
      :close-on-click-modal="false"
      width="530px"
    >
      <el-form ref="courseForm" class="gl_form_mini" :model="formdata" style="padding: 0 30px" label-width="80px">
        <el-input ref="password" v-model.trim="password" size="mini" placeholder="请输入密码" :type="passwordType" />
        <span class="show-pwd" @click="showPwd">
          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
        </span>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="passwordVisible = false">{{ $t('button.cancel') }}</el-button>
        <el-button v-if="!buthiden && buthiden !== 'SubstationGameExecte'" size="mini" type="primary" :loading="btnLoading" @click="confirm()">确 定</el-button>
        <el-button v-if="buthiden && buthiden !== 'SubstationGameExecte'" size="mini" type="primary" :loading="btnLoading" @click="goGameExecte()">确 定</el-button>
        <el-button v-if="buthiden === 'SubstationGameExecte'" size="mini" type="primary" :loading="btnLoading" @click="goSubstationGameExecte()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  api_POST_EventsManagementCompetitionSettingValidatePassword
} from '@/extend/api/gameswaggerApi/password';
import { SetCompetitionToken } from '@/lib/auth';
export default {
  data() {
    return {
      buthiden: false,
      btnLoading: false,
      passwordVisible: false,
      gameId: '',
      password: '',
      formdata: {},
      gameInfo: {},
      query: {},
      tenantId: '',
      passwordType: 'password',
      GameExecte: true
    };
  },
  watch: {
    passwordVisible: {
      handler() {
        if (this.passwordVisible === false) {
          this.password = '';
          this.buthiden = false;
        }
      },
      deep: true
    }
  },
  methods: {
    confirm() {
      this.btnLoading = true;
      api_POST_EventsManagementCompetitionSettingValidatePassword({ 'competitionId': this.gameId, 'password': this.password }).then(res => {
        this.btnLoading = false;
        this.$router.push({
          name: 'GameExecte',
          params: { ...this.gameInfo, tenantId: 't__' + (this.gameInfo.tenantId || '') },
          query: {
            gameName: this.gameInfo.name
          }
        });
        SetCompetitionToken(res);
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = '';
      } else {
        this.passwordType = 'password';
      }
      this.$nextTick(() => {
        this.$refs.password.focus();
      });
    },
    goGameExecte() {
      this.btnLoading = true;
      api_POST_EventsManagementCompetitionSettingValidatePassword({ 'competitionId': this.gameId, 'password': this.password }).then(res => {
        this.btnLoading = false;
        SetCompetitionToken(res);
        this.$router.push({
          name: 'GameExecte',
          params: { tenantId: 't__' + (this.tenantId || '') },
          query: {
            query: this.query
          }
        });
        this.passwordVisible = false;
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    goSubstationGameExecte() {
      this.btnLoading = true;
      api_POST_EventsManagementCompetitionSettingValidatePassword({ 'competitionId': this.gameId, 'password': this.password }).then(res => {
        SetCompetitionToken(res);
        this.btnLoading = false;
        if (this.GameExecte) {
          this.$router.push({
            name: 'SubstationGameExecte',
            params: { ...this.gameInfo, tenantId: 't__' + (this.gameInfo.tenantId || '') },
            query: {
              gameName: this.gameInfo.name
            }
          });
        } else {
          this.passwordVisible = false;
          this.$router.push({
            name: 'SubstationGameExecte',
            params: { tenantId: 't__' + (this.tenantId || '') },
            query: {
              gameName: this.query.gameName || ''
            }
          });
        }
      }, error => {
        this.btnLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  .show-pwd {
    position: absolute;
    right: 65px;
    top: 82px;
    font-size: 16px;
    cursor: pointer;
  }
</style>
